<template>
	<section>
		<div class="wrap">
			<Card class="card">
				<h2>评论</h2>
				<Input v-model="value" type="textarea" :rows="4" placeholder="说说你的看法..."></Input>
				<Button type="info" class="comments" @click="sendComment()"> 评论</Button>
			</Card>
			<div v-if='!title ' class="notComment">
				<Card>
					<h2>暂无评论!!</h2>
				</Card>

			</div>
			<div class="contents" v-for="value in comments">

				<Row class='row top'>
					<Col span="18"><span>coscos2d </span>在 [ <span class="article">{{title}} </span> ] 文章评论中 说道：</Col>
					<Col span="6">{{value.createtime}}</Col>
				</Row>
				<Row class='row content'>
					<Col span="24">{{value.content}}</Col>

				</Row>
			</div>

		</div>

	</section>
</template>

<script>
	import Server from '../server/server.js'
	export default {
		data() {
			return {
				value: '',
				comments: [],
				title: ''
			}
		},
		methods: {
			sendComment() {
				const aid = this.$route.query.aid;
				const content = this.value;
				if(!this.value) {
					this.info(true, '评论内容不能为空!');
					return;
				}
				this.value = '';
				Server.sendCommentsContent(content, aid).then((data) => {
					console.log(data)
					this.info(true, data.mes);
					return;
				})
			},
			getComents() {
				const aid = this.$route.query.aid;
				Server.commentsContent(aid).then((data) => {
					this.title = data.title;
					this.comments = data.list;
				})
			}
		},
		mounted() {
			setInterval(() => {
				this.getComents();
			}, 1000)
		}
	}
</script>

<style scoped="scoped" lang="less">
	section {
		width: 100%;
		.wrap {
			.card {
				padding-bottom: 40px;
			}
			width: 100%;
			min-width: 600px;
			float: right;
			margin: -20px 20px 50px 0;
			.notComment {
				margin-top: 50px;
				color: slategrey;
			}
			h2 {
				width: 100%;
				text-align: center;
				margin-bottom: 10px;
			}
			.comments {
				margin-top: 10px;
				position: absolute;
				right: 20px;
			}
			.contents {
				width: 100%;
				margin: 20px 0;
				border-bottom: 1px solid rosybrown;
				.row {
					margin: 10px 0;
					.article {
						color: #017EBC;
					}
				}
				.top {
					background: #f1f5f8;
					height: 40px;
					line-height: 40px;
					padding-left: 20px;
				}
				.content {
					border-left: 5px solid darkgray;
					padding: 0 0 20px 20px;
				}
			}
		}
		@media only screen and (max-width: 640px) {
			.wrap {
				width: 100% !important;
				min-width: 0;
				margin: 0;
			}
		}
	}
</style>